<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GeoJSON to Google Maps</title>
	<style type="text/css">
		#left{
			width: 700px;
			height: 500px;
			float:left;
		}
		#right{
			height: 500px;
			float:left;
			padding: 10px;
		}
		#right div{
			margin-bottom: 4px;
		}
		#map{
			height:100%;
		}
		#infoBox {
			width:300px;
		}
		
	</style>
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script type="text/javascript" src="GeoJSON.js"></script>
	<script type="text/javascript" src="geolocate-gmapsv3.js"></script>
	<script type="text/javascript">
	var map;
	function init() {
		map = new GeolocateGmapsv3('map', {
				zoom: 12,
				center: {
					lat: 39,
					lng: -108
				},
				popup : false,
				showUncertaintyRadius : true,
				showUncertaintyPolygon  : true,
				style: {
					markerOptions: {
						icon: new google.maps.MarkerImage('./peak.png')
					},
					circleOptions: {
						fillColor: '#00ff00',
						fillOpacity: 0.2,
						strokeWeight: 1,
						clickable: true,
						zIndex: 1,
						editable: false
					},
					polygonOptions: {
						fillColor: '#ffff00',
						fillOpacity: 0.2,
						strokeWeight: 1,
						strokeColor: '#ff0000',
						clickable: true,
						zIndex: 1,
						editable: false
					}
				}
			});
	}
	
	function showMap() {
		if($('#locality').val() == '' || $('#country').val() == '') {
			alert('locality and country should be provided');
		} else {
			var params = {};
			var properties = ['locality','country','state','county','language'];
			for(var i=0;i<properties.length;i++) {
				params[properties[i]] = $('#'+properties[i]).val();
			}
			properties = ['enableH2O','enableHwy','restrictToLowestAdm','enableUncert','doPoly','displacePoly'];
			for(var i=0;i<properties.length;i++) {
				params[properties[i]] = ($('#'+properties[i]).attr('checked') == 'checked') ? true : false;
			}
			map.query(params);
		}
	}
		
	function enableUncertaintyRadius() {
		map.enableUncertaintyRadius();
	}
		
	function disableUncertaintyRadius() {
		map.disableUncertaintyRadius();
	}
		
	function enableUncertaintyPolygon() {
		map.enableUncertaintyPolygon();
	}
		
	function disableUncertaintyPolygon() {
		map.disableUncertaintyPolygon();
	}
		
	</script>
</head>
<body onload="init();">
	<div id="left">
		<div id="map"></div>
		<div id="details"></div>
	</div>
	<div id="right">
		<div>
		<table>
		<tr><td>Locality String:</td><td><input type="text" id="locality" name="locality" value="bogalusa"></td></tr>
		<tr><td>Country:</td><td><input type="text" id="country" name="country" value="USA"></td></tr>
		<tr><td>State:</td><td><input type="text" id="state" name="state" value="LA"></td></tr>
		<tr><td>County:</td><td><input type="text" id="county" name="county"></td></tr>
		<tr><td>Match Water Body:</td><td><input id="enableH2O" type="checkbox" name="enableH2O" checked="checked" value="true" ></td></tr>
        <tr><td>Language:</td><td><select name="language" id="language">
			<option selected="selected" value="0">English</option>
			<option value="1">Spanish</option>
			<option value="2">Basque</option>
			<option value="3">Catalan</option>
			<option value="4">Galician</option>
		</select></td></tr>
		<tr><td>Detect Hwy/River Crossing:</td><td><input id="enableHwy" type="checkbox" name="enableHwy" checked="checked"></td></tr>
		<tr><td>Restrict to Lowest Adm. Unit:</td><td><input id="restrictToLowestAdm" type="checkbox" name="restrictToLowestAdm"></td></tr>
		<tr><td>Do Uncertainty:</td><td><input id="enableUncert" type="checkbox" name="enableUncert" checked="checked"></td></tr>
		<tr><td>Do Error Polygon:</td><td><input id="doPoly" type="checkbox" name="doPoly" checked="checked"></td></tr>
		<tr><td>Displace Polygon:</td><td><input id="displacePoly" type="checkbox" name="displacePoly"></td></tr>
		</table>
		</div>
		<div><input type="button" value="Locate" onclick="showMap();" /></div>
		<div><input type="button" value="Enable Uncertainty Radius" onclick="enableUncertaintyRadius();" /></div>
		<div><input type="button" value="Disable Uncertainty Radius" onclick="disableUncertaintyRadius();" /></div>
		<div><input type="button" value="Enable Uncertainty Polygon" onclick="enableUncertaintyPolygon();" /></div>
		<div><input type="button" value="Disable Uncertainty Polygon" onclick="disableUncertaintyPolygon();" /></div>
	</div>
</body>
</html>
